<template>
  <div id="index">
    <app-header></app-header>
    <div class="main">
      <div class="main_left">
        <div class="main_title">
          平台分红
        </div>
        <ul>
          <li>
            <span>累计分红金额</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.totalDividend">{{platformProfitsdata.totalDividend}}
              ETH</p>
          </li>
          <li>
            <span>累计分红人数</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.dividendNumber">
              {{platformProfitsdata.dividendNumber}}人</p>
          </li>
          <li>
            <span>累计人均</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.perCapita">
              ${{platformProfitsdata.perCapita}}</p>
          </li>
          <li>
            <span>昨日开奖金额</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.yesterdayAward">{{platformProfitsdata.yesterdayAward}}
              ETH</p>
          </li>
          <li>
            <span>累计开奖金额</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.totalAward">
              {{platformProfitsdata.totalAward}}ETH</p>
          </li>
          <li>
            <span>ONEBET流通总额</span>
            <p v-if="platformProfitsdata&&platformProfitsdata.turnOver">{{platformProfitsdata.turnOver}}</p>
          </li>
        </ul>
      </div>
      <div class="main_right">
        <div class="main_title">
          平台公告
          <i @click="goNew" class="el-icon-arrow-right"></i>
        </div>
        <div class="main_list">
          <div class="main_list_item" v-if="platformNoticedata&&platformNoticedata.length>0"
               v-for="(list,index) in platformNoticedata" :key="index">
            <span v-if="list.title" class="span_title cpt_95" v-html="list.title"></span>
            <span class="span_date">{{list.date}}</span>
          </div>
          <div class="main_list_item" v-if="!platformNoticedata||platformNoticedata.length<1">
            <p class="none-data">暂无数据</p>
          </div>
        </div>
      </div>
      <!--榜单-->
      <div class="main_left_div">
        <span class="main_span_title">新人必看</span>
        <div class="video_img" @click="handleView">
          <img src="../assets/image/video.jpg" alt="">
        </div>
      </div>
      <div class="main_right_div">
        <span class="main_span_title">分红榜单</span>
        <div class="main_tab main_li_top">
          <ul>
            <li @click="checkIndex(0)" :class="oIndex===0?'active':''">累计</li>
            <li @click="checkIndex(1)" :class="oIndex===1?'active':''">本周</li>
            <li @click="checkIndex(2)" :class="oIndex===2?'active':''">昨日</li>
          </ul>
          <div v-if="oIndex===0">
            <ul class="ul">
              <li v-if="totalData&&totalData.length>0" v-for="(list,index) in totalData"
                  :key="index">
                <span>NO.{{index+1}}</span>
                <span class="quan"></span>
                <span>{{list.userName}}</span>
                <span>{{list.amount}}ETH</span>
              </li>
              <li v-if="!totalData||totalData.length<1"><p class="none-data">暂无数据</p></li>
            </ul>
          </div>
          <div v-if="oIndex===1">
            <ul class="ul">
              <li v-if="weekData&&weekData.length>0" v-for="(list,index) in weekData"
                  :key="index">
                <span>NO.{{index}}</span>
                <span class="quan"></span>
                <span>{{list.userName}}</span>
                <span>{{list.amount}}ETH</span>
              </li>
              <li v-if="!weekData||weekData.length<1"><p class="none-data">暂无数据</p></li>
            </ul>
          </div>
          <div v-if="oIndex===2">
            <ul class="ul">
              <li v-if="yesterdayData&&yesterdayData.length>0" v-for="(list,index) in yesterdayData"
                  :key="index">
                <span>NO.{{index}}</span>
                <span class="quan"></span>
                <span>{{list.userName}}</span>
                <span>{{list.amount}}ETH</span>
              </li>
              <li v-if="!yesterdayData||yesterdayData.length<1"><p class="none-data">暂无数据</p></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="video-box" id="video_box" v-if="videoFlag">
      <div class="video-div">
        <video width="700" height="400" controls="controls" id="video">
          <source src="https://www.artup.com/mp4/jiashu.mp4" type="video/mp4">
        </video>
      </div>
    </div>
    <div class="my_service">
      <dl>
        <dt class="wow fadeInUp" data-wow-delay=".1s" data-wow-duration=".3s"
            style="visibility: visible; animation-duration: 0.3s; animation-delay: 0.1s; animation-name: fadeInUp;">
          我们的服务
        </dt>
        <dd>
          <div class="wow fadeInLeft" data-wow-delay=".2s" data-wow-duration="1s"
               style="visibility: visible; animation-duration: 1s; animation-delay: 0.2s; animation-name: fadeInLeft;">
            <img src="../assets/img/service01.png" alt="">
          </div>
          <section class="wow fadeInUp" data-wow-delay=".2s" data-wow-duration=".3s"
                   style="visibility: visible; animation-duration: 0.3s; animation-delay: 0.2s; animation-name: fadeInUp;">
            <span>200 000+</span>
            <p>來自於30個國家和地區的社區支持者</p>
          </section>
        </dd>
        <dd>
          <div class="wow fadeInLeft" data-wow-delay=".3s" data-wow-duration=".3s"
               style="visibility: visible; animation-duration: 0.3s; animation-delay: 0.3s; animation-name: fadeInLeft;">
            <img src="../assets/img/service02.png" alt="">
          </div>
          <section class="wow fadeInUp" data-wow-delay=".4s" data-wow-duration=".4s"
                   style="visibility: visible; animation-duration: 0.4s; animation-delay: 0.4s; animation-name: fadeInUp;">
            <span>1billion</span>
            <p>持幣用戶每天參與平台收益分紅</p>
          </section>
        </dd>
        <dd>
          <div class="wow fadeInRight" data-wow-delay=".4s" data-wow-duration="1s"
               style="visibility: visible; animation-duration: 1s; animation-delay: 0.4s; animation-name: fadeInRight;">
            <img src="../assets/img/service03.png" alt="">
          </div>
          <section class="wow fadeInUp" data-wow-delay=".6s" data-wow-duration=".4s"
                   style="visibility: visible; animation-duration: 0.4s; animation-delay: 0.6s; animation-name: fadeInUp;">
            <span>20+</span>
            <p style="width: 168px;">專業媒體及投資合作方</p>
          </section>

        </dd>
        <dd style="padding-right: 0;">
          <div class="wow fadeInRight" data-wow-delay=".6s" data-wow-duration="1.4s"
               style="visibility: visible; animation-duration: 1.4s; animation-delay: 0.6s; animation-name: fadeInRight;">
            <img src="../assets/img/service04.png" alt="">
          </div>
          <section class="wow fadeInUp" data-wow-delay=".8s" data-wow-duration=".5s"
                   style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.8s; animation-name: fadeInUp;">
            <span>30+</span>
            <p style="width: 168px;">一流公司的技術／運營夥伴</p>
          </section>
        </dd>
      </dl>
    </div>

    <div class="source">
      <div class="source_left">
        <div class="title">
          OneBet
          <p>
            基於區塊鏈去中心化自治的中獎平台
          </p>
        </div>
        <span class="span_title">開放透明</span>
        <p class="p_content">基於區塊鏈平台，One bet的每一個環節都是開放、透明的，規避了作弊的可能，讓每個用戶都能查詢到真實的交易數據。</p>
        <span class="span_title">安全交易</span>
        <p class="p_content">而區塊鏈利用密碼學、分布式存儲賬本、點對點 網絡通訊等技術手段，實現了數據不可篡改性和 不可刪除，使人依賴真實的數據記錄而非信任。 這樣，One bet通過上鏈來保證了交易的安全可
          靠，資產的風險性大大降低。
        </p>
      </div>
      <div class="source_right">
        <img class="wow bounceIn" data-wow-delay=".1s" data-wow-duration="1.4s" src="../assets/img/source.png"
             style="visibility: visible; animation-duration: 1.4s; animation-delay: 0.1s; animation-name: bounceIn;">
      </div>
    </div>
    <div class="feature">
      <dl>
        <dt>特色</dt>
        <dd class="wow fadeInUp" data-wow-delay=".1s" data-wow-duration=".5s"
            style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.1s; animation-name: fadeInUp;">
          <div>
            <img src="../assets/img/feature1.png" alt="">
          </div>
          <span>受眾範圍廣</span>
          <p>全球有超過十億人對眾籌、博彩 十分感興趣，特別是One bet， 市場前景非常廣闊。
          </p>
        </dd>
        <dd class="wow fadeInUp" data-wow-delay=".5s" data-wow-duration=".8s"
            style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.5s; animation-name: fadeInUp;">
          <div>
            <img src="../assets/img/feature2.png" alt="">
          </div>
          <span>參與門檻低</span>
          <p>$1即可參與，且透明的、由社區 聯合決策的、高性能加密貨幣 社區平台。
          </p>
        </dd>
        <dd class="wow fadeInUp" data-wow-delay=".8s" data-wow-duration="1s"
            style="margin-right: 0px; visibility: visible; animation-duration: 1s; animation-delay: 0.8s; animation-name: fadeInUp;">
          <div>
            <img src="../assets/img/feature3.png" alt="">
          </div>
          <span>贏利性極佳</span>
          <p>每一場活動抽取贏家20%作為 平台建設及分紅，平台用戶 數50W時，年贏利可達1450W 用於分紅
          </p>
        </dd>
      </dl>
    </div>
    <div class="usartboard"></div>
    <div class="product">
      <span>OneBet第一個產品</span>
      <p>百萬富翁</p>
      <p>基於區塊鏈技術，用ETH/BTC即可獲得更多ETH/BTC，最高可以獲得1000BTC！</p>
      <ul>
        <li class="wow fadeInUp" data-wow-delay=".1s" data-wow-duration=".5s"
            style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.1s; animation-name: fadeInUp;"><img
          src="../assets/img/product01.jpg"></li>
        <li class="wow fadeInUp" data-wow-delay=".5s" data-wow-duration=".8s"
            style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.5s; animation-name: fadeInUp;"><img
          src="../assets/img/product02.jpg"></li>
        <li class="wow fadeInUp" data-wow-delay="1s" data-wow-duration="1s"
            style="margin-right: 0px; visibility: visible; animation-duration: 1s; animation-delay: 1s; animation-name: fadeInUp;">
          <img src="../assets/img/product03.jpg"></li>
      </ul>
    </div>
    <div class="pieChart">
      <span class="title">Token分配方案</span>
      <div class="pie_box">
        <img class="wow bounceIn" data-wow-delay=".1s" data-wow-duration="1.4s" src="../assets/img/pieChart.png" alt=""
             style="visibility: visible; animation-duration: 1.4s; animation-delay: 0.1s; animation-name: bounceIn;">
        <div class="pie_text">
          <span class="wow fadeInDown" data-wow-delay=".3s" data-wow-duration=".4s"
                style="padding-top: 40px; visibility: visible; animation-duration: 0.4s; animation-delay: 0.3s; animation-name: fadeInDown;">代幣簡稱：ONEBET</span>
          <span class="wow fadeInDown" data-wow-delay=".6s" data-wow-duration=".8s"
                style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.6s; animation-name: fadeInDown;">發行總量：10億枚</span>
          <p class="wow fadeInRight" data-wow-delay=".1s" data-wow-duration=".2s"
             style="padding-top: 40px; visibility: visible; animation-duration: 0.2s; animation-delay: 0.1s; animation-name: fadeInRight;">
            1、社區：55%,5.5億枚；</p>
          <p class="wow fadeInRight" data-wow-delay=".2s" data-wow-duration=".4s"
             style="visibility: visible; animation-duration: 0.4s; animation-delay: 0.2s; animation-name: fadeInRight;">
            2、團隊持有：15%，1.5億枚，鎖倉6個月；</p>
          <p class="wow fadeInRight" data-wow-delay=".3s" data-wow-duration=".6s"
             style="visibility: visible; animation-duration: 0.6s; animation-delay: 0.3s; animation-name: fadeInRight;">
            3、公募：5%，0.5億枚，鎖倉3個月；</p>
          <p class="wow fadeInRight" data-wow-delay=".4s" data-wow-duration=".8s"
             style="visibility: visible; animation-duration: 0.8s; animation-delay: 0.4s; animation-name: fadeInRight;">
            4、合作夥伴：12%，1.2億枚，鎖倉3個月；</p>
          <p class="wow fadeInRight" data-wow-delay=".5s" data-wow-duration="1s"
             style="visibility: visible; animation-duration: 1s; animation-delay: 0.5s; animation-name: fadeInRight;">
            5、生態建設：8%，0.8億枚，鎖倉3個月；</p>
          <p class="wow fadeInRight" data-wow-delay=".6s" data-wow-duration="1.2s"
             style="visibility: visible; animation-duration: 1.2s; animation-delay: 0.6s; animation-name: fadeInRight;">
            6、顧問：5%，0.5億枚。</p>
        </div>
      </div>
    </div>
    <div class="develop">
    </div>
    <el-carousel class="carousel" height="810px" indicator-position="outside">
      <el-carousel-item>
        <div class="swipe">
          <span>團隊</span>
          <ul>
            <li><img src="../assets/img/touxiang02.jpg" alt="" data-src-orig="../assets/img/touxiang02.jpg">
              <div>
                <p>Jerry hou 侯勇浩</p>
              </div>
              <p>南陽理工大學計算機碩士， 新加坡Paypal高級研發工程師， 是互聯網技術資深專家。曾帶領百人研發 團隊，多年前就進入區塊鏈領域，創建了中國 最早一批基於以太坊合約的DAPP。
              </p>
            </li>
            <li><img src="../assets/img/touxiang01.jpg" alt="" data-src-orig="../assets/img/touxiang01.jpg">
              <div>
                <p>Tomas Chen 陳立人</p>
                <p>發起人&amp;CEO</p>
              </div>
              <p>畢業於新加坡國立大學 商學院 MBA，曾在新加坡Paypal任職高級PM （Senior Project Manager），擁有7年以上與財富 500強創業公司的合作經驗，有着大量的人脈
                資源。比特幣早期天使投資人，是區塊鏈 創新研究院專家團隊成員，長期以來致力於 區塊鏈底層技術的研究，是早期全球區塊鏈 技術的奠基人與佈道者。
              </p>
            </li>

            <li style="margin-right: 0;"><img src="../assets/img/touxiang03.jpg" alt=""
                                              data-src-orig="../assets/img/touxiang03.jpg">
              <div>
                <p>Xiang hu</p>
              </div>
              <p>北京大學金融學本碩連讀， 前網易有道任職工程師、 產品總監，有着多年的互聯網產品設計與 數據分析工作經驗。曾主導過海量用戶的 互聯網產品，熟悉從零到一的 產品發展過程。
              </p>
            </li>
          </ul>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="swipe">
          <span>團隊</span>
          <ul>
            <li><img src="../assets/img/touxiang02.jpg" alt="" data-src-orig="../assets/img/touxiang02.jpg">
              <div>
                <p>Jerry hou 侯勇浩</p>
              </div>
              <p>南陽理工大學計算機碩士， 新加坡Paypal高級研發工程師， 是互聯網技術資深專家。曾帶領百人研發 團隊，多年前就進入區塊鏈領域，創建了中國 最早一批基於以太坊合約的DAPP。
              </p>
            </li>
            <li><img src="../assets/img/touxiang01.jpg" alt="" data-src-orig="../assets/img/touxiang01.jpg">
              <div>
                <p>Tomas Chen 陳立人</p>
                <p>發起人&amp;CEO</p>
              </div>
              <p>畢業於新加坡國立大學 商學院 MBA，曾在新加坡Paypal任職高級PM （Senior Project Manager），擁有7年以上與財富 500強創業公司的合作經驗，有着大量的人脈
                資源。比特幣早期天使投資人，是區塊鏈 創新研究院專家團隊成員，長期以來致力於 區塊鏈底層技術的研究，是早期全球區塊鏈 技術的奠基人與佈道者。
              </p>
            </li>

            <li style="margin-right: 0;"><img src="../assets/img/touxiang03.jpg" alt=""
                                              data-src-orig="../assets/img/touxiang03.jpg">
              <div>
                <p>Xiang hu</p>
              </div>
              <p>北京大學金融學本碩連讀， 前網易有道任職工程師、 產品總監，有着多年的互聯網產品設計與 數據分析工作經驗。曾主導過海量用戶的 互聯網產品，熟悉從零到一的 產品發展過程。
              </p>
            </li>
          </ul>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!--探索1dollar.bet-->
    <div class="explore">
      <span>探索1dollar.bet</span>
      <ul>
        <li class="wow fadeInUp" data-wow-delay=".1s" data-wow-duration=".5s"
            style="visibility: visible; animation-duration: 0.5s; animation-delay: 0.1s; animation-name: fadeInUp;">
          <img src="../assets/img/explore1.jpg" alt="">
        </li>
        <li class="wow fadeInUp" data-wow-delay=".5s" data-wow-duration=".8s"
            style="height: 632px; top: 40px; visibility: visible; animation-duration: 0.8s; animation-delay: 0.5s; animation-name: fadeInUp;">
          <img src="../assets/img/explore3.jpg" alt="">
        </li>
        <li class="wow fadeInUp" data-wow-delay=".8s" data-wow-duration="1s"
            style="margin-right: 0px; visibility: visible; animation-duration: 1s; animation-delay: 0.8s; animation-name: fadeInUp;">
          <img src="../assets/img/explore2.jpg" alt="">
        </li>
      </ul>
    </div>
    <div class="footer_ft">
      <h2 class="title">關於我們</h2>
      <h6>打造全球共享的加密貨幣交易平台</h6>
      <p>官方網站:
        <a href="http://www.1dollar.bet">http://www.1dollar.bet</a>
      </p>
      <p>官方電報群
        <a href="https://t.me/joinchat/H2JtkBARJFF5IGz-HBCRPg">https://t.me/joinchat/H2JtkBARJFF5IGz-HBCRPg</a>
      </p>
      <p>郵箱地址：contact@1dollar.bet</p>
    </div>
  </div>
</template>

<script>
  import header from '../components/header/header'
  import Api from '@/axios/api/api'

  export default {
    name: 'test',
    data() {
      return {
        oIndex: 0,
        videoFlag: false,
        platformProfitsdata: null,
        platformNoticedata: [],
        totalData: [],
        weekData: [],
        yesterdayData: [],
        platformListdata: []
      }
    },
    methods: {
      goNew() {
        this.$router.push({
          path: '/notice'
        })
      },
      // 获取平台分红数据
      getplatformProfits() {
        Api.platformProfits().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.platformProfitsdata = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      // 获取平台公告
      getplatformNotice() {
        let param = {
          pageSize: 5,
          pageNum: 1
        }
        Api.platformNotice(param).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.platformNoticedata = result.data.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      // 首页-分红榜
      getplatformList() {
        Api.platformList().then(res => {
          let result = res.data
          if (result.code === 0) {
            this.totalData = result.data.total
            this.weekData = result.data.week
            this.yesterdayData = result.data.yesterday
          } else {
            this.$message.error(result.message)
          }
        })
      },
      checkIndex(index) {
        this.oIndex = index
      },
      handleView() {
        this.videoFlag = true
        let vm = this
        setTimeout(() => {
          let ovideoBox = document.getElementById('video_box')
          document.getElementById('video').play()
          ovideoBox.onclick = function (e) {
            if (e.target.id === 'video') return false
            vm.videoFlag = false
          }
        }, 300)
      }
    },
    components: {
      'app-header': header
    },
    mounted() {
      this.getplatformProfits()
      this.getplatformNotice()
      this.getplatformList()
    }
  }
</script>

<style lang="less">
  #index {
    .carousel {
      /*height: 810px !important;*/
      /*.el-carousel__item{height: 810px;}*/
      .swipe {
        width: 1200px;
        margin: 0 auto;
        height: 100%;
        > span {
          display: block;
          font-family: PingFangSC-Semibold;
          font-size: 40px;
          color: #110153;
          text-align: center;
          line-height: 56px;
          padding: 100px 0 68px 0;
        }
        ul {
          overflow: hidden;
          li {
            float: left;
            width: 367px;
            margin-right: 47px;
            img {
              width: 144px;
              height: 144px;
              border-radius: 50%;
              display: block;
              margin: 0 auto;
            }
            > div {
              padding: 30px 0 26px 0;
              height: 60px;
              p {
                font-family: PingFangSC-Semibold;
                font-size: 24px;
                color: #110153;
                text-align: center;
                line-height: 30px;
              }
            }
            > p {
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #110153;
              text-align: center;
              line-height: 30px;
            }
          }
        }
      }
    }
    .footer_ft {
      width: 100%;
      height: 912px;
      background: #2E1569;
      text-align: center;
      h2 {
        font-family: PingFangSC-Semibold;
        font-size: 40px;
        color: #FFFFFF;
        padding: 292px 0 60px 0;
        line-height: 56px;
      }
      h6 {
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 42px;
        padding-bottom: 70px;
      }
      p {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #FFFFFF;
        text-align: center;
        line-height: 50px;
        a {
          color: #fff;
        }
      }
    }
    .explore {
      background: #EFEFEF;
      padding: 65px 0;
      > span {
        font-family: PingFangSC-Semibold;
        font-size: 40px;
        color: #110153;
        line-height: 56px;
        display: block;
        text-align: center;
        padding-bottom: 54px;
      }
      ul {
        overflow: hidden;
        width: 1190px;
        margin: 0 auto;
        li {
          position: relative;
          width: 352px;
          height: 530px;
          float: left;
          margin-right: 64px;
          img {
            width: 100%;
          }
        }
      }
    }
    .develop {
      background: url('../assets/img/guiji.jpg') no-repeat center center;
      height: 910px;
      width: 100%;
    }
    .pieChart {
      padding: 140px 0;
      background: #fff;
      .title {
        display: block;
        text-align: center;
        font-family: PingFangSC-Semibold;
        font-size: 40px;
        color: #25265E;
        line-height: 56px;
      }
      .pie_box {
        width: 1200px;
        margin: 60px auto 0;
        overflow: hidden;
        > img {
          width: 610px;
          display: block;
          float: left;
        }
        .pie_text {
          float: right;
          width: 506px;
          > span {
            display: block;
            font-size: 26px;
            color: #25265E;
          }
          > p {
            font-size: 26px;
            color: #25265E;
          }
        }
      }
    }
    .product {
      background: #2E1569;
      padding: 96px 0 118px 0;
      > p {
        font-family: PingFangSC-Semibold;
        font-size: 32px;
        color: #FFFFFF;
        text-align: center;
        line-height: 44px;
      }
      > span {
        font-family: PingFangSC-Semibold;
        font-size: 40px;
        color: #FFFFFF;
        display: block;
        text-align: center;
        line-height: 56px;
        padding-bottom: 64px;
      }
      > ul {
        padding-top: 76px;
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        li {
          float: left;
          margin-right: 74px;
          width: 350px;
          height: 410px;
          img {
            width: 350px;
            height: 410px;
            display: block;
          }
        }
      }
    }
    .usartboard {
      background: url('../assets/img/usartboard.jpg') no-repeat center center;
      height: 910px;
      width: 100%;
    }
    .feature {
      padding: 178px 0;
      background: #2E1569;
      overflow: hidden;
      dl {
        width: 1200px;
        margin: 0 auto;
        dt {
          font-family: PingFangSC-Semibold;
          font-size: 40px;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          line-height: 56px;
          padding-bottom: 66px;
        }
        dd {
          background: #FFFFFF;
          border-radius: 20px;
          width: 358px;
          height: 430px;
          float: left;
          margin-right: 63px;
          > div {
            width: 100px;
            height: 100px;
            margin: 55.5px auto;
            position: relative;
            font-family: PingFangSC-Medium;
            img {
              max-height: 100%;
              max-width: 100%;
              position: absolute;
              margin: auto auto;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
            }
          }
          > span {
            display: block;
            text-align: center;
            font-size: 24px;
            color: #25265E;
            letter-spacing: 0;
            text-align: center;
          }
          p {
            padding-top: 30px;
            width: 280px;
            margin: 0 auto;
            font-size: 20px;
            color: #130000;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
          }
        }
      }
    }
    .source {
      width: 1180px;
      margin: 0 auto;
      padding: 105px 0 226px 0;
      overflow: hidden;
      > div {
        float: left;
      }
      .source_right {
        float: right;
        img {
          width: 562px;
          height: 579px;
        }
      }
      .source_left {
        width: 462px;
        font-family: PingFangSC-Semibold;
        color: #25265E;
        letter-spacing: 0;
        text-align: left;
        font-size: 22px;
        padding-top: 100px;
      }
      .title {
        font-size: 40px;
        > p {
          font-size: 28px;
          line-height: 56px;
        }
      }
      .span_title {
        font-size: 24px;
        line-height: 56px;
      }
      .p_content {
        font-family: "微软雅黑";
        font-weight: 400;
        font-size: 22px;
        padding-bottom: 30px;
      }
    }
    .my_service {
      background: #EFEFEF;
      dl {
        width: 1180px;
        padding: 160px 0 296px 0;
        margin: 0 auto;
        overflow: hidden;
        dt {
          font-family: PingFangSC-Semibold;
          font-size: 40px;
          color: #25265E;
          text-align: center;
          padding-bottom: 103px;
        }
        dd {
          float: left;
          width: 240px;
          margin-right: 55px;
          > div {
            width: 130px;
            height: 130px;
            position: relative;
            margin: 0 auto;
          }
          img {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            bottom: 0;
          }
          span {
            font-family: PingFangSC-Regular;
            font-size: 48px;
            color: #5A27F6;
            text-align: center;
            line-height: 68px;
            padding-top: 12px;
            display: block;
          }
          p {
            font-family: PingFangSC-Regular;
            font-size: 24px;
            color: #130000;
            text-align: center;
            line-height: 33px;
            padding-top: 15px;
            margin: 0 auto;
          }
        }
      }
    }
    .main {
      overflow: hidden;
      .main_li_top {
        .ul {
          padding: 0 24px;
          box-shadow: 2px 2px 10px 0 #DBD9DF;
          li {
            overflow: hidden;
            line-height: 56px;
            border-bottom: 1px solid #eee;
            span {
              float: left;
              display: block;
              &:nth-child(1) {
                width: 44px;
                font-size: 16px;
                color: #8638FD;
              }
              &:nth-child(2) {
                width: 30px;
                height: 30px;
                background: #D8D8D8;
                border-radius: 50%;
                margin-top: 12px;
              }
              &:nth-child(3) {
                margin-left: 40px;
                width: 150px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              &:nth-child(4) {
                width: 50px;
                float: right;
              }
            }
          }
        }
      }
      font-family: PingFangSC-Regular;
      width: 1200px;
      margin: 0 auto;
      .main_left_div {
        width: 750px;
        float: left;
        margin-bottom: 77px;
      }
      .video_img {
        width: 750px;
        height: 400px;
        cursor: pointer;
        img {
          height: 100%;
        }
      }
      .main_right_div {
        width: 400px;
        float: right;
        margin-bottom: 77px;
      }
      .main_span_title {
        font-size: 28px;
        color: #000;
        padding: 30px 0;
        display: block;
      }
      .main_left {
        width: 750px;
        float: left;
        box-shadow: 2px 2px 10px 0 rgba(219, 217, 223, 0.50);
        ul {
          padding: 0 24px;
          overflow: hidden;
          li {
            width: 33.33%;
            float: left;
            border-bottom: 1px solid #eee;
            span {
              font-size: 18px;
              color: #000000;
              padding: 30px 0 12px 0;
              display: block;
            }
            p {
              font-size: 28px;
              color: #7B52F8;
              padding: 12px 0 30px 0;
            }
            &:nth-child(4) {
              border: none;
            }
            &:nth-child(5) {
              border: none;
            }
            &:nth-child(6) {
              border: none;
            }
          }
        }
      }
      .main_right {
        width: 400px;
        float: right;
        box-shadow: 2px 2px 10px 0 #DBD9DF;
        .main_list {
          padding: 0 24px;
          overflow: hidden;
          /*margin-bottom: 14px;*/
          height: 261px;
          .main_list_item {
            font-size: 16px;
            color: #000;
            line-height: 49px;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
            overflow: hidden;
          }
          .span_title {
            width: 70%;
            display: inline-block;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .span_date {
            text-align: right;
            display: inline-block;
            float: right;
          }
        }
      }
      .main_title {
        background: #7B52F8;
        font-size: 18px;
        color: #FFFFFF;
        text-indent: 24px;
        line-height: 56px;
        overflow: hidden;
        position: relative;
        > i {
          position: absolute;
          right: 0px;
          top: 0px;
          cursor: pointer;
          padding: 20px 24px;
          &:hover {
            opacity: .8;
          }
          &:active {
            position: absolute;
            top: 1px;
          }
        }
      }
    }
  }
</style>
